<template>
    <div class="login-dialog">
        <template v-if="nickDialog">
            <div class="login-dialog-title">设置昵称</div>
            <div class="login-form">
                <div class="login-dialog-input-item">
                    <label for="nickname">昵称</label>
                    <input id="nickname" type="text" placeholder="请输入昵称" v-model="nickName">
                </div>
                <div class="login-dialog-btn">
                    <button class="login-btn" @click="setName">立即登录</button>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="login-dialog-title">登录</div>
            <div class="login-form">
                <div class="login-dialog-input-item">
                    <label for="photo">手机号码</label>
                    <input id="photo" type="text" placeholder="请输入手机号码" v-model="username">
                </div>
                <div class="login-dialog-input-item">
                    <label for="num">邀请码</label>
                    <input id="num" type="text" placeholder="请输入邀请码" v-model="code">
                </div>
                <div class="login-dialog-btn">
                    <button class="login-btn" @click="getLogin">立即登录</button>
                </div>
            </div>
        </template>
    </div>
</template>
<script>
import {
    loginByUserCode,
    setNickName
} from '@/api/api'
export default {
    data: function() {
        return {
            nickDialog: false,
            username: '',
            code: '',
            nickName: '',
        }
    },
    methods: {
        getLogin: function() {
            if (!this.username) {
                alert('请输入账号');
                return;
            }
            if (!this.code) {
                alert('请输入邀请码');
                return;
            }
            var data = {
                username: this.username,
                code: this.code
            }
            loginByUserCode(data).then(res => {
                console.log(res)
                localStorage.setItem('token', res.token)
                localStorage.setItem('user', JSON.stringify(res.user))
                localStorage.setItem('loginTime', new Date().getTime())
                var freeTime = {
                    minute: 4,
                    second: 60
                }
                localStorage.setItem('freeTime', JSON.stringify(freeTime))
                if (!res.user.name) {
                    this.nickDialog = true;
                    return;
                } else {
                    localStorage.setItem('nickName', res.user.name)
                    alert('登录成功');
                    this.$router.push('/')
                }
                sessionStorage.setItem('s', 1)
                clearInterval(this.freeTimer)
                this.freeTimer = null;
            })
        },
        setName: function() {
            if (!this.nickName) {
                alert('请输入昵称');
                return;
            }
            setNickName(this.nickName).then(res => {
                localStorage.setItem('nickName', this.nickName)
                alert('登录成功');
                this.$router.push('/')
            })
        }
    }
}

</script>
<style socped>
/*dialog*/

.login-dialog-title {
    text-align: center;
    font-size: 20px;
    line-height: 20px;
    margin: 20px 0;
}

.login-form {
    padding: 5px 20px;
}

.login-dialog-input-item {
    margin: 10px 0;
}

.login-dialog-input-item label {
    display: inline-block;
    width: 80px;
    font-size: 18px;
    vertical-align: middle;
    text-align: justify;
    text-align-last: justify;
}

.login-dialog-input-item input {
    height: 30px;
    padding-left: 5px;
    margin-left: 5px;
    vertical-align: middle;
    border-radius: 5px;
    outline: none;
    border: 1px solid #ccc;
}

.login-dialog-btn {
    padding: 0 20px;
    margin: 20px 0;
    height: 40px;
}

.login-dialog-btn button {
    width: 100%;
    height: 100%;
    border-radius: 5px;
    outline: none;
    border: none;
    color: #fff;
    font-size: 16px;
}

.login-btn {
    background-color: #000;
}

.close-btn {
    background-color: #f44336;
}

</style>
